    <template>
  <transition name="dialog-fade">
    <el-dialog :title="dialogTitle" class="dialog-screen" append-to-body :visible.sync="screenDialog" width="50%">
      <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="套餐类型" prop="region">
        <el-select
          v-model="ruleForm.region"
          style="width:50%"
          clearable
          @change="chagemeal"
          placeholder="请选择套餐类型"
        >
          <el-option label="小时卡" value="3"></el-option>
          <el-option label="次卡" value="1"></el-option>
          <el-option label="期卡" value="2"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="适用门店" prop="shop">
        <el-select v-model="ruleForm.shop" clearable style="width:50%" multiple placeholder="请选择">
          <el-option
            :label="item.store_name"
            v-for="(item,index) in storelist"
            :key="index"
            :value="item.id"
          ></el-option>
          <!-- <el-option label="银点" value="2"></el-option>
          <el-option label="通电" value="3"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item style="text-align: right;">
          <el-button @click="screenDialog=false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
import Base64 from "@/utils/base";
import { setReturns,setMeal } from "@/api/user";
// import { getuserid } from '../../utils/auth'
export default {
  name: "Dialogscreen",
  inject: ["reload"],
  props: {
    // msg: {
    //   type: String,
    //   default: ''
    // },
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      userData: "",
      screenDialog: false,
      page:1,
      changeval:"",
      storelist: "",
      ruleForm:{
        region:"",
        shop:""
      }
    }
  },
  mounted() {
    // this.getOpt()
  },
  created(){
    this.getsetReturn()
  },
  methods: {
    chagemeal(e) {
      this.changeval = e;
    },
    getsetReturn() {
      setReturns({}).then(res => {
         if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.storelist = res.result.store;
      });
    },
    //  getdata() {
    //    let params = {
    //      page:this.page
    //    }
    //   userFixed({
    //     request_data: Base64.encode(JSON.stringify(params))
    //   }).then(res => {
    //      if(res.status==2){
    //       this.$message({
    //         message:res.message,
    //         type:'warning'
    //       })
    //       return
    //     }
    //     this.userData = res.result.data
    //   });
    // },
    //   获取下拉框
    // getOpt() {
    //   this.getRequest('/asset/getTypeList', {}).then(res => {
    //     this.options = res.obj
    //   })
    // },
    // 保存操作
    submitForm(formName) {
        localStorage.setItem("type_id",this.ruleForm.region)
        localStorage.setItem("shop_id",this.ruleForm.shop.join(","))
        // this.reload()
      let parmes = {
        store_ids:this.ruleForm.shop.join(",")||0,
        type:this.ruleForm.region||0,
        page: 1,
        limit: 10
      };
      setMeal({
        request_data: Base64.encode(JSON.stringify(parmes))
      }).then(res => {
        console.log(res)
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.screenDialog = false
        // localStorage.setItem("type_id",this.ruleForm.region)
        // localStorage.setItem("shop_id",this.ruleForm.shop.join(","))
        // this.tableDatas = res.result.data;
        // this.totle = res.result.count;
        localStorage.setItem("tableDatas",JSON.stringify(res.result.data))
        localStorage.setItem("totle",JSON.stringify(res.result.count))
        this.reload()
      })
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>
